<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="演员姓名">
        <el-input
          clearable
          v-model="formInline.name"
          placeholder="请输入演员姓名"
          @clear="getDate"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">演员</el-divider>
    <!-- //父向子传参，父组件需要定义自定义属性，子组件通过props接受 -->
    <peroson
      v-for="item in actors"
      :key="item.id"
      :actor_avatar="item.actor_avatar"
      :actor_name="item.actor_name"
      @del="sc(item.id)"
    ></peroson>
  </div>
</template>

<script>
import Peroson from '@/components/peroson.vue'
    export default {
        components:{
            Peroson
        },
        data(){
            return{
                 formInline: {
          name: '',
        },
        actors:[],
        scActor:{
          id:0
        }
      }
            },
            methods:{
                    onSubmit(){
                        let newForm = this.qs.stringify(this.formInline);
                        if(this.formInline.name === ""){
                            this.getDate();
                        } else{
                        this.$http.post('/movie-actors/name',newForm).then(res=>{
                            console.log('1234',res)
                            this.actors = res.data.data
                        })
                        }
                    },
                   async getDate(){
                     const res = await this.$http.get('/movie-actors',{params:{page:1,pagesize:100}})
                     console.log(res,'res');
                     this.actors = res.data.data;
                    },
                   async sc(id){
                      // movie-actor/del
                      console.log("点击了删除按钮",id)
                      
                     const confirmButtonText = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                         confirmButtonText: '确定',
                          cancelButtonText: '取消',
                            type: 'warning',
                              }).catch(err => err)
                      console.log(confirmButtonText)

                      if(confirmButtonText!=='confirm'){
                          return this.$message.info("已取消删除")
                      }
                    
                    this.scActor.id = id;
                    let newId = this.qs.stringify(this.scActor)
                      this.$http.post("/movie-actor/del",newId).then(res=>{
                        console.log(res)
                        if(res.data.code === 200){
                          this.$message.success("删除成功")
                        }else{
                          this.$message.error("删除失败")
                        }

                      })
            },
            },
            created(){
                this.getDate();
            }
        }
    
</script>

<style lang="scss" scoped>
.peroson {
  margin: 5px;
  display: inline-block;
  width: 143px;
  padding: 5px;
  border: 1px solid #ccc;
  text-align: center;
  position: relative;
}
.peroson:hover i {
  display: block;
}
.peroson i {
  display: none;
  position: absolute;
  top: -10px;
  right: -10px;
  background: #fff;
  font-size: 15px;
}
</style>